<template>
  <div class="introduce">
    <div class="introduce-top">
      <p>
        <span>SHOP IN:</span>
        <span>CHINA.MAINLAND</span>
      </p>
      <p @click="goPage('Distribution')">店铺分类</p>
      <p>真实性</p>
      <p @click="goPage('CustomerService')">客户服务</p>
    </div>
    <div class="introduce-middle">
      <img src="@/assets/introduce/qq.png" alt="#">
      <img src="@/assets/introduce/wechat.png" alt="#">
      <img src="@/assets/introduce/facebook.png" alt="#">
      <img src="@/assets/introduce/instagram.png" alt="#">
      <img src="@/assets/introduce/mail.png" alt="#">
    </div>
    <div class="introduce-bottom" v-if="showBottom">
      <p>网站地图</p>
      <p>法律问题</p>
      <p>隐私声明</p>
    </div>
    <img class="introduce-bg" src="@/assets/introduce/icon.png" alt="#">
  </div>
</template>

<script>
export default {
  props: ['showBottom'],
  methods: {
    goPage(name) {
      this.$router.push({name})
      this.$emit('closeMenu')
    }
  }
}
</script>

<style lang="scss" scoped>
.introduce {
  background: black;
  position: relative;
  .introduce-top {
    position: relative;
    z-index: 2;
    padding: 10px 0;
    border-bottom: 1px solid #fff;
    p {
      line-height: 32px;
      color: #fff;
      text-align: center;
      font-size: 14px;
      &:nth-child(1) {
        span {
          &:nth-child(2) {
            margin-left: 20px;
          }
        }
      }
    }
  }
  .introduce-middle {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    img {
      height: 22px;
      &:nth-child(3) {
        height: 26px;
      }
      &:nth-child(5) {
        width: 26px;
      }
    }
  }
  .introduce-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid #fff;
    p {
      line-height: 32px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
  .introduce-bg {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    opacity: .23;
  }
}
</style>